<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 20px Times New Roman';

        // Center and scale
        const cx = canvas.width / 2;
        const cy = 220; // Center y-coordinate, adjusted for figure label
        const radius = 160; // Radius of the main circle

        // --- Helper function to draw an arrow ---
        function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing ---

        // 1. Draw the main circle
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Define and draw the three fixed points (sources) on the circle
        // Angles are in degrees, measured counter-clockwise from the positive x-axis
        const angles = [140, 40, 270]; // Top-left, Top-right, Bottom
        const sourcePoints = angles.map(angle => {
            const rad = angle * Math.PI / 180;
            return {
                x: cx + radius * Math.cos(rad),
                y: cy - radius * Math.sin(rad) // Use minus for standard Cartesian y-axis direction
            };
        });

        sourcePoints.forEach(p => {
            ctx.beginPath();
            ctx.arc(p.x, p.y, 4, 0, 2 * Math.PI);
            ctx.fill();
        });

        const p_tl = sourcePoints[0]; // Top-left point
        const p_tr = sourcePoints[1]; // Top-right point
        const p_b = sourcePoints[2];  // Bottom point

        // 3. Define the central vertex point (as shown in the diagram, slightly off-center)
        const vertex = { x: cx, y: cy + 30 };
        
        // 4. Draw lines from the vertex to the points on the circle
        ctx.beginPath();
        ctx.moveTo(vertex.x, vertex.y);
        ctx.lineTo(p_tl.x, p_tl.y);
        ctx.moveTo(vertex.x, vertex.y);
        ctx.lineTo(p_tr.x, p_tr.y);
        ctx.moveTo(vertex.x, vertex.y);
        ctx.lineTo(p_b.x, p_b.y);
        ctx.stroke();
        
        // 5. Define the point mass 'm' and its position vector 'r'
        const m = { x: cx + 40, y: cy - 70 };
        ctx.beginPath();
        ctx.arc(m.x, m.y, 4, 0, 2 * Math.PI);
        ctx.fill();

        // Draw position vector 'r' from the vertex to 'm'
        ctx.beginPath();
        ctx.moveTo(vertex.x, vertex.y);
        ctx.lineTo(m.x, m.y);
        ctx.stroke();
        
        // 6. Draw lines from sources to the mass 'm' (as shown in the diagram)
        ctx.beginPath();
        ctx.moveTo(p_tr.x, p_tr.y);
        ctx.lineTo(m.x, m.y);
        ctx.stroke();
        
        // 7. Draw the velocity vector 'v'
        const v_end = { x: m.x + 70, y: m.y - 30 };
        drawArrow(m.x, m.y, v_end.x, v_end.y);

        // 8. Add labels
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Labels 'a'
        ctx.save();
        ctx.translate(cx - 90, cy + 60);
        ctx.rotate(-25 * Math.PI/180);
        ctx.fillText('a', 0, 0);
        ctx.restore();

        ctx.save();
        ctx.translate(cx + 90, cy + 60);
        ctx.rotate(25 * Math.PI/180);
        ctx.fillText('a', 0, 0);
        ctx.restore();

        ctx.fillText('a', cx, cy + 120);
        
        // Label 'm'
        ctx.fillText('m', m.x - 15, m.y - 5);

        // Label 'r'
        ctx.fillText('r', (vertex.x + m.x) / 2 + 10, (vertex.y + m.y) / 2);

        // Label 'v'
        ctx.fillText('v', v_end.x - 20, v_end.y - 20);

        // Figure caption
        ctx.font = '18px Times New Roman';
        ctx.fillText('Fig. 1.21.', cx, canvas.height - 20);

    </script>
</body>
</html>